var myReady = function($){
    var cartWrapper = $('.cd-cart-container');
    //product id - you don't need a counter in your real project but you can use your real product id
    var productId = 0;

    if (cartWrapper.length > 0) {
        //store jQuery objects
        var cartBody = cartWrapper.find('.body')
        var cartList = cartBody.find('ul').eq(0);
        var cartTotal = cartWrapper.find('.checkout').find('span');
        var cartTrigger = cartWrapper.children('.cd-cart-trigger');
        var cartCount = cartTrigger.children('.count')
        //var addToCartBtn = $('.cd-add-to-cart');
        var addToCartBtn = $('.add-button');
        var undo = cartWrapper.find('.undo');
        var undoTimeoutId;

        //add product to cart
        addToCartBtn.on('click', function(event) {
            event.preventDefault();
            var ajaxReq = asyncRequest("http://localhost:8080/ceat/shoppingcart");
            var foodId = $(this).attr("data-proid");
//            alert(foodId);
            var dd ={
            	"cmd":"add",
            	"foodId":foodId
            };
            ajaxReq.doPost(dd,function(msg){
                refreshShoppingCart(msg);
            });
            
            
            // addToCart($(this));
        });

        //open/close cart
        cartTrigger.on('click', function(event) {
            event.preventDefault();
            toggleCart();
        });

        //close cart when clicking on the .cd-cart-container::before (bg layer)
        cartWrapper.on('click', function(event) {
            if ($(event.target).is($(this)))
                toggleCart(true);
        });

        //delete an item from the cart
        cartList.on('click', '.delete-item', function(event) {
            event.preventDefault();
            removeProduct($(event.target).parents('.product'));
        });

        //update item quantity
        cartList.on('change', 'select', function(event) {
            quickUpdateCart();
        });

        //reinsert item deleted from the cart
        undo.on('click', 'a', function(event) {
            clearInterval(undoTimeoutId);
            event.preventDefault();
            cartList.find('.deleted').addClass('undo-deleted').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
                $(this).off('webkitAnimationEnd oanimationend msAnimationEnd animationend').removeClass('deleted undo-deleted').removeAttr('style');
                quickUpdateCart();
            });
            undo.removeClass('visible');
        });
    }

    function toggleCart(bool) {
        var cartIsOpen = (typeof bool === 'undefined') ? cartWrapper.hasClass('cart-open') : bool;

        if (cartIsOpen) {
            cartWrapper.removeClass('cart-open');
            //reset undo
            clearInterval(undoTimeoutId);
            undo.removeClass('visible');
            cartList.find('.deleted').remove();

            setTimeout(function() {
                cartBody.scrollTop(0);
                //check if cart empty to hide it
                if (Number(cartCount.find('li').eq(0).text()) == 0)
                    cartWrapper.addClass('empty');
            }, 500);
        } else {
            cartWrapper.addClass('cart-open');
        }
    }

    function addToCart(trigger) {
        var cartIsEmpty = cartWrapper.hasClass('empty');
        //update cart product list
        var price = trigger.data('price'),
                proname = trigger.data('proname'),
                proid = trigger.data('proid'),
                proimg = trigger.data('proimg'),
                proCount = trigger.data('count')
                ;
        		
        addProduct(proname, proid, price, proimg,proCount);
        //console.log();

        //update number of items
        updateCartCount(cartIsEmpty);
        //update total price
        updateCartTotal(trigger.data('price'), true);
        //show cart
        cartWrapper.removeClass('empty');
    }

    ///刷新购物车
    function refreshShoppingCart(data){
        cartList.empty();
        data.forEach((item,index)=>{
                    var food = $("<a></a>").attr("data-price",item.price).attr("data-proid",item.id).attr("data-proname",item.name).attr("data-proimg",item.img).attr("data-count",item.count);
                    addToCart(food);
                });
    }

    function addProduct(proname, proid, price, proimg,proCount) {
        //this is just a product placeholder
        //you should insert an item with the selected product info
        //replace productId, productName, price and url with your real product info
        productId = productId + 1;

        var quantity = $("#cd-product-" + proid).text();
        var select = '', productAdded = '';

        //console.log(Number(quantity));
        //console.log(quantity);

        if (quantity == '') {
            var select = '<button class="cd-sub">-</button><span class="select">x<i id="cd-product-' + proid + '">'+proCount+'</i></span><button class="cd-add">+</button>';
            // var productAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="' + proimg + '" alt="placeholder"></a></div><div class="product-details"><h3><a href="#0">' + proname + '</a></h3><span class="price">￥' + price + '</span><div class="actions"><a href="#0" class="delete-item">删除</a><div class="quantity"><label for="cd-product-' + proid + '">件数</label>' + select + '</div></div></div></li>');
            var father = $("<li></li>").addClass("product");
            //<div class="product-details"><h3><a href="#0">' + proname + '</a></h3><span class="price">￥' + price + '</span><div class="actions"><a href="#0" class="delete-item">删除</a><div class="quantity"><label for="cd-product-' + proid + '">件数</label>' + select + '</div></div></div></li>')
            var productImg = $("<div></div>").addClass("product-image").append($("<img></img>").attr("src",proimg).attr("alt","placeholder"));
            var productDetail = $("<div></div>").addClass("product-details")
              .append($("<h3></h3>").text(proname))
              .append($("<span></span>").addClass("price").text("$"+price))
              ///<div class="actions"><a href="#0" class="delete-item">删除</a><div class="quantity"><label for="cd-product-' + proid + '">件数</label>' + select + '</div></div></div></li>')
              .append($("<div></div>").addClass("actions").append($("<a></a>").addClass("delete-item").text("删除").click(function(e){
                ///ajax 异步删除某一个货品
            	  var ajaxReq = asyncRequest("http://localhost:8080/ceat/shoppingcart");
                  var foodId = proid;
//                  alert(foodId);
                  var dd ={
                  	"cmd":"clear",
                  	"foodId":foodId
                  };
                  ajaxReq.doPost(dd,function(msg){
                      refreshShoppingCart(msg);
                  });
              }))
              .append($("<div></div>").addClass("quantity").append($("<label></label>").attr("for","cd-product-" + proid).append(select)))
              );

            father.append(productImg).append(productDetail);

            /////////////////////////////////////
            // cartList.prepend(productAdded); //
            /////////////////////////////////////
            cartList.prepend(father);


        } else {
            quantity = parseInt(quantity);
            //var select = '<span class="select">x<i id="cd-product-'+proid+'">'+quantity+'</i></span>';
            $("#cd-product-" + proid).html(quantity + 1);
        }
        $(".cd-sub").unbind("click");
        $(".cd-sub").click(function(){
             var numNode = $(this) .parent().children(".select").children("[id^=cd-product]")[0];
             var total = parseInt($(numNode).html());
             if(total>0){
                $(numNode).html(--total);
                var ajaxReq = asyncRequest("http://localhost:8080/ceat/shoppingcart");
                var foodId = proid;
//                alert(foodId);
                var dd ={
                	"cmd":"delete",
                	"foodId":foodId
                };
                ajaxReq.doPost(dd,function(msg){
                    refreshShoppingCart(msg);
                });
             }
             
        });
        $(".cd-add").unbind("click");
        $(".cd-add").click(function(){
             var numNode = $(this) .parent().children(".select").children("[id^=cd-product]")[0];
             var total = parseInt($(numNode).html());
             $(numNode).html(++total);
             var ajaxReq = asyncRequest("http://localhost:8080/ceat/shoppingcart");
             var foodId = proid;
//             alert(foodId);
             var dd ={
             	"cmd":"add",
             	"foodId":foodId
             };
             ajaxReq.doPost(dd,function(msg){
                 refreshShoppingCart(msg);
             });
         });
        //var productAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="img/product-preview.png" alt="placeholder"></a></div><div class="product-details"><h3><a href="#0">'+proname+'</a></h3><span class="price">￥'+price+'</span><div class="actions"><a href="#0" class="delete-item">删除</a><div class="quantity"><label for="cd-product-'+ proid +'">件数x</label><span class="select"><select id="cd-product-'+ proid +'" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></span></div></div></div></li>');
        //cartList.prepend(productAdded);
        ///让Ajax 异步请求
    }

    function removeProduct(product) {
        clearInterval(undoTimeoutId);
        cartList.find('.deleted').remove();

        var topPosition = product.offset().top - cartBody.children('ul').offset().top,
                productQuantity = Number(product.find('.quantity').find('.select').find('i').text()),
                productTotPrice = Number(product.find('.price').text().replace('￥', '')) * productQuantity;

        product.css('top', topPosition + 'px').addClass('deleted');

        //update items count + total price
        updateCartTotal(productTotPrice, false);
        updateCartCount(true, -productQuantity);
        undo.addClass('visible');

        //wait 8sec before completely remove the item
        undoTimeoutId = setTimeout(function() {
            undo.removeClass('visible');
            cartList.find('.deleted').remove();
        }, 8000);
    }

    function quickUpdateCart() {
        var quantity = 0;
        var price = 0;

        cartList.children('li:not(.deleted)').each(function() {
            var singleQuantity = Number($(this).find('.select').find('i').text());
            quantity = quantity + singleQuantity;
            price = price + singleQuantity * Number($(this).find('.price').text().replace('￥', ''));
        });

        cartTotal.text(price.toFixed(2));
        cartCount.find('li').eq(0).text(quantity);
        cartCount.find('li').eq(1).text(quantity + 1);
    }

    function updateCartCount(emptyCart, quantity) {
        if (typeof quantity === 'undefined') {
            var actual = Number(cartCount.find('li').eq(0).text()) + 1;
            var next = actual + 1;

            if (emptyCart) {
                cartCount.find('li').eq(0).text(actual);
                cartCount.find('li').eq(1).text(next);
            } else {
                cartCount.addClass('update-count');

                setTimeout(function() {
                    cartCount.find('li').eq(0).text(actual);
                }, 150);

                setTimeout(function() {
                    cartCount.removeClass('update-count');
                }, 200);

                setTimeout(function() {
                    cartCount.find('li').eq(1).text(next);
                }, 230);
            }
        } else {
            var actual = Number(cartCount.find('li').eq(0).text()) + quantity;
            var next = actual + 1;

            cartCount.find('li').eq(0).text(actual);
            cartCount.find('li').eq(1).text(next);
        }
    }

    function updateCartTotal(price, bool) {
        bool ? cartTotal.text((Number(cartTotal.text()) + Number(price)).toFixed(2)) : cartTotal.text((Number(cartTotal.text()) - Number(price)).toFixed(2));
    }
}


jQuery(document).ready(myReady);